useEffect會在每次 component render 後執行， 預設情況下每次 render 後都會執行 useEffect (它在第一個 render 和隨後每一個更新之後執行），就是每當組件重新渲染時，觸發useeffect 重新執行。

我們透過在 component 中使用useEffect Hook， 讓我們可以直接從component 內部呼叫 useEffect中存取state 變數（或任何 props）。透過使用這個 Hook，告訴 React component 需要在 render 後做一些事情。React 將記住你傳遞的 function並在執行 DOM 更新之後呼叫它。常用在執行fetch資料提取或呼叫其他命令式 API。

useEffect( function , dependency )

useEffect有兩個參數

第一個是function函數，所要執行的內容
第二個為依賴項，可以定義何時執行函數

我們可以透過設定第二個參數dependency控制函數何時運行

1.No dependency：

因為 useEffect 預設會更新，如果没有設定dependency，它會在每次render時重新執行

useEffect(( ) =>{
 Run on every render
})

2.An empty array

一個空的陣列，只會在應用程式加載時執行

useEffect(( ) =>{
Run only on the first render
},[ ])

Props or state value

每當數據或狀態值改變時，就會觸發執行函式

useEffect(( ) =>{
 Run on the prop or state value change 
},[ prop,state])